<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common/index.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <!-- 顶栏导航 begin -->
    <div class="layui-header">
        <div class="layui-logo">
            <img src="../images/logo.png" class="x-logo">
            <img src="../images/title.png" class="x-top-title">
        </div>
        <div class="layui-layout-right">
            <ul class="layui-nav x-top-nav">
                <li class="layui-nav-item active">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            首页
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            任务核查
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            人员管理
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-tjfx.png">
                            统计分析
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
            </ul>
            <ul class="x-nav-user">
                <li class="layui-nav-item">
                    <dl class="x-user-info">
                        <dd class="x-user-photo">
                            <img src="../images/user.png">
                        </dd>
                        <dd class="x-user-text-box">
                            <span class="x-user-name">系统管理员：王要得</span>
                            <span class="x-user-score">积分：279</span>
                        </dd>
                        <dd class="x-user-logout">
                            <img class="nav-logout-icon" src="../images/nav/nav-logout.png">
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 顶栏导航 end -->

    <!-- 主体内容 begin -->
    <div class="layui-body">
        <div class="row-box" style="width: 1200px;margin: auto;">
            <div class="layui-row layui-col-space20 x-m-top">
                <div class="layui-col-md7">
                    <!--核查情况统计 pie-->
                    <div class="layui-card">
                        <div class="layui-card-header">核查情况统计</div>
                        <div class="layui-card-body" style="margin: auto 10px;min-height: 510px;">
                            <div class="sum-data">
                                <table>
                                    <thead>
                                    <tr style="height: 30px;">
                                        <td>本周核查统计</td>
                                        <td>本月核查统计</td>
                                        <td>全军累计核查统计</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr style="height: 40px;">
                                        <td style="">35,187</td>
                                        <td>35,187</td>
                                        <td>35,187</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div style="min-height: 300px;">
                                <div id="mypie" style="width: 100%;height:300px;"></div>
                            </div>
                            <div class="pie-title">
                                <ul>
                                    <li>本周核查总量</li>
                                    <li>本月核查总量</li>
                                    <li>累计核查总量</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <!--核查总体情况-->
                    <div class="layui-card">
                        <div class="layui-card-header">核查总体情况</div>
                        <div class="layui-card-body" style="margin: auto 10px;">
                            <div class="bg-title">
                                <div class="left-title">背景审查总人数</div>
                                <div class="left-title-data">154,285</div>
                            </div>
                            <div class="child-classfy">
                                <ul>
                                    <li>子分类名称： <span>1,232</span></li>
                                    <li>子分类名称：<span>1,232</span></li>
                                    <li>子分类名称： <span>1,232</span></li>
                                    <li>子分类名称： <span>1,232</span></li>
                                    <li>子分类名称： <span>1,232</span></li>
                                    <li>子分类名称： <span>1,232</span></li>
                                    <li>子分类名称： <span>1,232</span></li>
                                    <li>子分类名称： <span>1,232</span></li>
                                    <li>子分类名称： <span>1,232</span></li>
                                    <li>子分类名称： <span>1,232</span></li>
                                </ul>
                            </div>
                            <div class="child-classfy-content">
                                <p>关于你，2012年的九月，那是我们认识的季节，
                                    在四十多平米的教室里，我认识了你。我们是同学，彼此都还不熟悉的同学。那
                                    一句个子还高嘛，是我关注你的开始，有意无意的从四组向一组瞟你，小心
                                    翼翼的眼神怕你发现，却又怕你不明白，一点点的喜欢不敢声张。后来的打过来
                                    骂过去，后来聊天的默契，互道的晚安，才明白原来就是喜欢，没有其他。确定是
                                    喜欢，可是还是不敢声张。只因当初在人群中你说了一句，从此，你便住在了心里。
                                    不敢轻易靠近打扰，是怕自己扰了你的生活步调
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space20">
                <!--背景审查工作流程图-->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">背景审查工作流程图</div>
                        <div class="layui-card-body" style="margin: auto -15px;display: inline-block;">
                            <div class="reminder">
                                <div class="triangle-blue"></div>
                                <div class="reminder-title">温馨提示：</div>
                                <p>背景审查系统是非实时深刻系统，当您在“任务管理页面点击新建任务创建任务后，
                                    将待核查人员添加到任务页面，提交即可，随后即耐心等待审核结果即可。</p>
                            </div>
                            <div class="point-out">
                                <ul style="margin-left: -55px;">
                                    <li><span>创建任务</span></li>
                                    <li><span>添加人员</span></li>
                                    <li><span>提交任务</span></li>
                                    <li><span>公安查询</span></li>
                                    <li><span>结果反馈</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体内容 end -->

    <!-- 底栏 begin -->
    <div class="layui-footer layui-footer-full">
        <!-- 底部固定区域 -->
        主程序版本号: V1.0.0.1
    </div>
    <!-- 底栏 end -->
</div>

<script src="../../lib/layui/layui.all.js"></script>
<script src="../../lib/echarts/echarts.js"></script>
<script src="../../lib/jquery-1.9.1.min.js"></script>
<script>
    (function () {
        // week month all
        /**
         * 测试demo数据
         * @type {*[]}
         */
        var pieData = [
            {
                name: '本周核查统计',
                type: 'week',
                data: [
                    {type: 'lower', title: '下级', count: 49, total: 100},
                    {type: 'self', title: '本部', count: 62, total: 300},
                    {type: 'whole', title: '全军', count: 600, total: 1320}
                ]
            },
            {
                name: '本月核查统计',
                type: 'month',
                data: [
                    {type: 'lower', title: '下级', count: 49, total: 100},
                    {type: 'self', title: '本部', count: 62, total: 300},
                    {type: 'whole', title: '全军', count: 1020, total: 1320}
                ]
            },
            {
                name: '全军累计核查总量',
                type: 'all',
                data: [
                    {type: 'lower', title: '下级', count: 49, total: 100},
                    {type: 'self', title: '本部', count: 62, total: 300},
                    {type: 'whole', title: '全军', count: 830, total: 1320}
                ]
            }
        ]
// ===================================================================================
        var cacheChart = {
            pie1: null,
            pie2: null,
            pie3: null
        }
        var _ft = {
            init: function () {
                this.drawPie(pieData);
            },
            /**
             * 图表配置
             * @param d
             * @returns {{}}
             */
            chartOption: function (d) {
                console.log('>>', d)
                var _location = {
                    'week': ['16%', '50%'],
                    'month': ['50%', '50%'],
                    'all': ['84%', '50%']
                }
                var _radius = {
                    'whole': [74, 86],
                    'self': [59, 69],
                    'lower': [42, 52]
                }
                var _series = [], _legendData = []
                var _color = ['#76d68b', '#69a4e3', '#8ca0e7', '#F3F7F8'];
                var _dataStyle = {
                    normal: {
                        label: {
                            show: false,
                            position: 'inside'
                        },
                        labelLine: {
                            show: false
                        },
                        shadowBlur: 40,
                        borderWidth: 20,
                        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                    }
                };
                var _placeHolderStyle = {
                    normal: {
                        color: '#393d50',
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    emphasis: {
                        color: '#393d50'
                    }
                };
                for (var i = 0; i < d.length; i++) {
                    var _item = d[i]
                    for (var ii = 0; ii < _item.data.length; ii++) {
                        var _subItem = _item.data[ii]
                        if ($.inArray(_subItem.title, _legendData) < 0) {
                            _legendData.push(_subItem.title)
                        }
                        _series.push(
                            {
                                name: _subItem.title,
                                type: 'pie',
                                clockWise: false,
                                radius: _radius[_subItem.type],
                                center: _location[_item.type],
                                itemStyle: _dataStyle,
                                hoverAnimation: false,
                                startAngle: 90,
                                data: [
                                    {
                                        value: _subItem.count,
                                        name: _subItem.title,
                                        itemStyle: {
                                            normal: {
                                                color: _color[ii]
                                            },
                                            emphasis: {
                                                label: {
                                                    show: true,
                                                    position: [10, 10],
                                                    distance: 20
                                                }
                                            }
                                        },
                                    },
                                    {
                                        value: (_subItem.total - _subItem.count),
                                        tooltip: {
                                            show: false
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: _color[3]
                                            },
                                            emphasis: {
                                                color: _color[3]
                                            }
                                        }
                                    }
                                ]
                            }
                        )
                    }
                }
                console.log(_series)
                return {
                    backgroundColor: '#fff',
                    color: _color,
                    title: {
                        // text: '审查',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 24,
                            color: "#fff",
                        }
                    },
                    legend: {
                        x: 'right',
                        data: _legendData
                    },
                    tooltip: {
                        trigger: 'item',
                        show: true,
                        formatter: "{b}核查: {c}",
                        backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                        padding: [8, 10], //内边距
                        extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                    },
                    series: _series
                }
            },
            // 核查情况统计饼图
            drawPie: function (data) {
                if (cacheChart.pie1) {
                    cacheChart.pie1.dispose()
                }
                cacheChart.pie1 = echarts.init(document.getElementById('mypie'));
                cacheChart.pie1.setOption(this.chartOption(data));
            }
        };
        _ft.init();
    })()
</script>
</body>
</html>